<template>
  <Modal
    :mask-closable="false"
    v-model="viewDetial"
    :title="`${edit ? '动态' : '常规'}视图详细`"
    width="888"
    footer-hide
  >
    <Spin fix v-show="showSpin"></Spin>
    <div v-if="edit" class="details">
      <Row :gutter="16" v-if="Detialtrue.detail">
        <Col span="16"
          ><h3>
            {{ Detialtrue.detail.title
            }}<span class="ivu-ml-16"
              >{{ Detialtrue.detail.patient_num }}人</span
            >
          </h3></Col
        >
        <Col span="8">
          <p class="sky-upTag">
            创建人：{{ Detialtrue.detail.realname }}
            <span>创建日期：{{ Detialtrue.detail.created_at }}</span>
          </p>
        </Col>
      </Row>
      <Form v-if="Detialtrue.detail">
        <FormItem label="筛选条件：" class="ivu-mt-16 ivu-mb-0">
          <Tag
            v-for="(item, index) in Detialtrue.detail.view_condition"
            :key="index"
            >{{ item }}</Tag
          >
        </FormItem>
        <FormItem label="推送部门/人员：">
          <Tag
            v-for="(item, index) in Detialtrue.detail.view_push"
            :key="index"
            >{{ item }}</Tag
          >
        </FormItem>
      </Form>
      <Row :gutter="16">
        <Col span="8" v-if="Detialtrue.arrived_list">
          <h4>到诊记录（{{ Detialtrue.arrived_list.total }}人）</h4>
          <div class="sky-pd" v-if="arrived_list.length > 0">
            <Timeline class="ivu-pt-16">
              <TimelineItem v-for="(item, index) in arrived_list" :key="index">
                <p class="time">{{ item.revisiting_time }}</p>
                <p class="content">
                  {{ item.user_name }}
                  {{
                    +item.gender === 0
                      ? "未知"
                      : +item.gender === 1
                      ? "男"
                      : "女"
                  }}
                  {{ item.age }}
                </p>
              </TimelineItem>
            </Timeline>
            <div
              class="ivu-text-center"
              v-if="
                Detialtrueparams.pageSize * Detialtrueparams.page <
                  Detialtrue.arrived_list.total
              "
            >
              <a @click="clicktrue">加载更多</a>
            </div>
          </div>
          <div
            v-else
            style="height:280px;display: flex; align-items: center; justify-content: center;"
          >
            暂无到诊记录
          </div>
        </Col>
        <Col span="16">
          <h4>操作记录</h4>
          <div
            class="sky-pd"
            v-if="Detialtrue.view_log && Detialtrue.view_log.length > 0"
          >
            <Timeline class="ivu-pt-16">
              <TimelineItem
                v-for="(item, index) in Detialtrue.view_log"
                :key="index"
              >
                <p class="time">{{ item.created_at }}</p>
                <p class="content">{{ item.content }}</p>
                <p class="consultant">{{ item.operate_name }}</p>
              </TimelineItem>
            </Timeline>
          </div>
          <div
            v-else
            style="height:280px;display: flex; align-items: center; justify-content: center;"
          >
            暂无操作记录
          </div>
        </Col>
      </Row>
    </div>
    <div v-else class="details">
      <Row :gutter="16">
        <Col span="16"
          ><h3>
            {{ Detialfalsedata.title
            }}<span class="ivu-ml-16">{{ Detialfalsedata.patient_num }}人</span>
          </h3></Col
        >
        <Col span="8">
          <p class="sky-upTag">
            创建人：{{ Detialfalsedata.realname }}
            <span class="ivu-ml-8"
              >创建日期：{{ Detialfalsedata.created_at }}</span
            >
          </p>
        </Col>
      </Row>
      <Form :label-width="80">
        <FormItem
          :label="item"
          v-for="(item, index) in keys"
          :key="index"
          class="ivu-mt-16 ivu-mb-0"
        >
          <span v-for="(items, indexs) in Detialfalse[item]" :key="indexs">
            <Tag v-if="+index === Detialfalse[item].length">{{ items }}</Tag>
            <Tag v-else class="ivu-ml-8">{{ items }}</Tag>
          </span>
        </FormItem>
      </Form>
    </div>
  </Modal>
</template>
<script>
import {
  settingviewdynamicdetail,
  settingviewnormaldetail,
} from "@/api/hqapi/indexone";
export default {
  data() {
    return {
      showSpin: false,
      viewDetial: false,
      edit: true,
      Detialtrueparams: {
        id: "",
        page: 1,
        pageSize: 10,
      },
      arrived_list: [],
      Detialtrue: {},
      Detialfalse: {},
      keys: [],
      Detialfalsedata: {},
    };
  },
  methods: {
    // 常规视图
    initial(row) {
      this.edit = false;
      this.viewDetial = true;
      this.Detialfalsedata = row;
      this.showSpin = true;
      settingviewnormaldetail({ id: row.id }).then((res) => {
        this.Detialfalse = res;
        this.keys = Object.keys(res);
        this.showSpin = false;
      });
    },
    // 动态视图
    initials(id) {
      this.Detialtrueparams.id = id;
      this.showSpin = true;
      this.edit = true;
      this.viewDetial = true;
      this.Detialtrueparams.page = 1;
      this.arrived_list = [];
      this.askDatas();
    },
    // 请求数据
    clicktrue() {
      this.Detialtrueparams.page = this.Detialtrueparams.page + 1;
      this.askDatas();
    },
    askDatas() {
      settingviewdynamicdetail(this.Detialtrueparams).then((res) => {
        this.Detialtrue = res;
        this.arrived_list.push(...res.arrived_list.list);
        this.showSpin = false;
        this.logs(this.arrived_list);
      });
    },
  },
};
</script>
<style scoped>
.sky-pd {
  height: 300px;
  overflow: auto;
}
.ivu-tag {
  border-radius: 11px !important;
}
.details {
  min-height: 300px;
}
</style>
